{% extends "index.html" %}
{% load static %}

{% block mycss %}
    <link href="{% static 'js/lib/layui/css/layui.css' %}" rel="stylesheet">
{% endblock %}

{% block title %}
    <span class="navbar-page-title" id="sign"> 知识图谱服务接口 - 文本解析服务 </span>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar clearfix" style="padding-bottom: 10px">

                        <div style="margin-bottom: 30px;width: 800px">
                            <input type="text" name="path" readonly hidden="hidden">
                            <input id="choose_file" type="file" multiple="multiple"
                                   style="height: 0;width: 0;z-index: -1;" name="choosed_file"
                                   onChange="return process_file(this)">
                            <select name="file_type" id="file_type" style="float: left"
                                    {#                                    class="my-select">#}
                                    class="btn btn-default dropdown-toggle my-select">

                                <option value="" style="color: gray;display: none;">请选择上传文件类型</option>
                                <option value="sql">SQL文件</option>
                                <option value="html">网页html源码</option>
                                <option value='docx,doc'>Word文档</option>
                                <option value="csv">csv文档</option>
                                <option value="txt">txt文档</option>
                            </select>


                            <input id="hidden_btn" type="button" onclick="getElementById('choose_file').click()"
                                   class="my-btn" style="margin-left: 15px;float: left" value="选择文件">
                            <input type="submit" id="file_assess"
                                   data-loading-text="处理中..."
                                   class="my-btn" style="margin-left: 10px;float: left"
                                   value="抽取">
                            <p class="my-input-p" id="file_name">&nbsp;&nbsp;&nbsp;&nbsp;</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="background-color: #ffffff;padding: 25px;">
            <input type="button" onclick="insert_map()" class="my-btn" value="插入到知识图谱" style="display: none;"
                   id="insert_map">
            <table id="extract_data" class="my-table" style="width:100%">
                <thead id="ex_data_thead" style="display: none;">
                <tr>
                    <th style="font-weight: bolder;font-size: 15px;width:10%;text-align: center">序号</th>
                    <th style="font-weight: bolder;font-size: 15px;width:20%;text-align: center">头实体</th>
                    <th style="font-weight: bolder;font-size: 15px;width:15%;text-align: center">头实体类型</th>
                    <th style="font-weight: bolder;font-size: 15px;width:20%;text-align: center">关系类型</th>
                    <th style="font-weight: bolder;font-size: 15px;width:20%;text-align: center">尾实体</th>
                    <th style="font-weight: bolder;font-size: 15px;width:15%;text-align: center">尾实体类型</th>
                </tr>
                </thead>
                <tbody id="ex_data_tbody">
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block myjs %}

    <script type="text/javascript" src="{% static 'js/lib/layui/layui.all.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/xadmin.js' %}"></script>


    <script type="text/javascript">
        {#console.log(queryURLName('canReturn'))#}

        var sign = "{{ sign }}";
        if (sign === "0") {
            document.getElementById("jsxqywmxgj").style.display = 'block';
            document.getElementById("zsgj").style.backgroundColor = 'rgba(30,21,21,0.44)';
            $('#sign').val(' 军事需求业务模型构建 - 数据推理分析模型构建 ');
        } else if (sign === "1") {
            document.getElementById("zstpfwjk").style.display = 'block';
            document.getElementById("wbjxfw").style.backgroundColor = 'rgba(30,21,21,0.44)';
            $('#sign').val(' 知识图谱服务接口 - 文本解析服务 ');
        }


        // 判断元素在不在数组方法
        function isInArray(arr, value) {
            for (var i = 0; i < arr.length; i++) {
                if (value === arr[i]) {
                    return true;
                }
            }
            return false;
        }

        // 设置文件上传标志位
        function process_file(obj) {
            $('#path').val = obj.value;
            $('#file_name').html($('#choose_file').val().split('\\').slice(-1))
        }

        // 上传文件
        $('#file_assess').click(function () {
            // 校验用户是否选择下来框数据
            var file_type = $('#file_type').val();
            if (file_type === '') {
                layer.msg("请选择要选择的文件类型！");
                $('#file_type').focus();
                return false;
            }

            // 校验用户是否选择上传文件
            var file_path = $('#choose_file').val();
            if (file_path === '') {
                layer.msg("选择文件为空！");
                $('#choosed_file').focus();
                return false;
            }

            var formdata = new FormData();
            var file_obj = $('[type=file]')[0].files[0];
            var choosed_type = $('#file_type').val().split(',');

            // 获取文件名后缀
            var file_name_list = file_obj.name.split(".");
            var file_name_suffix = file_name_list[file_name_list.length - 1];

            if (isInArray(choosed_type, file_name_suffix)) {
            } else {
                layer.msg("请选择正确的文件格式！");
                $('#choosed_file').focus();
                return false;
            }

            formdata.append("file", file_obj);
            formdata.append("file_type", choosed_type);

            $.ajax({
                url: '{% url 'model' %}',
                type: 'POST',
                async: false,
                data: formdata,
                processData: false, // 使数据不做处理
                contentType: false, // 不要设置Content-Type请求头
                success: function (data) {
                    // 显示表头数据以及插入到知识图谱按钮
                    document.getElementById('ex_data_thead').style.display = '';
                    document.getElementById('insert_map').style.display = '';
                    // document.getElementById('map_preview').style.display = '';

                    var tbody = document.getElementById('ex_data_tbody');
                    // 清空之前创建的表格信息
                    $('#ex_data_tbody').empty();

                    for (var i = 0, length = data["data"].length; i < length; i++) {
                        var singel_data = data["data"][i];
                        var tr = document.createElement('tr');
                        // td1 = document.createElement('td');
                        // td1.innerHTML = '<input type="checkbox" id=' + singel_data["id"] + '>';
                        // td1.innerHTML = '';
                        td2 = document.createElement('td');
                        td2.innerText = i + 1;
                        td2.style.textAlign = "center";
                        td3 = document.createElement('td');
                        td3.innerText = singel_data["head_node"];
                        td3.contentEditable = "true";
                        td3.style.textAlign = "center";
                        td4 = document.createElement('td');
                        td4.innerText = singel_data["head_type"];
                        td4.contentEditable = "true";
                        td4.style.textAlign = "center";
                        td5 = document.createElement('td');
                        td5.innerText = singel_data["relationship"];
                        td5.contentEditable = "true";
                        td5.style.textAlign = "center";
                        td6 = document.createElement('td');
                        td6.innerText = singel_data["tail_node"];
                        td6.contentEditable = "true";
                        td6.style.textAlign = "center";
                        td7 = document.createElement('td');
                        td7.innerText = singel_data["tail_type"];
                        td7.contentEditable = "true";
                        td7.style.textAlign = "center";
                        // tr.appendChild(td1);
                        tr.appendChild(td2);
                        tr.appendChild(td3);
                        tr.appendChild(td4);
                        tr.appendChild(td5);
                        tr.appendChild(td6);
                        tr.appendChild(td7);
                        tbody.appendChild(tr)
                    }
                },
                error: function (response) {
                    console.log(response);
                }
            });
        });

        function get_table_data() {
            var tableValues = [];
            var table = document.getElementById("ex_data_tbody");
            var rows = table.rows;

            for (var i = 0; i < rows.length; i++) {
                row_dict = {};
                console.log('第' + i + '行');
                row_data = [];
                for (var j = 0; j < rows[i].cells.length; j++) {
                    row_data.push(rows[i].cells[j].innerText);
                }
                row_dict["head_node"] = row_data[1];
                row_dict["head_type"] = row_data[2];
                row_dict["relation"] = row_data[3];
                row_dict["tail_node"] = row_data[4];
                row_dict["tail_type"] = row_data[5];

                tableValues.push(row_dict);
            }
            return tableValues;
        }

        // 将抽取到的三元组数据插入到知识图谱
        function insert_map() {
            console.log($('#all_choice').val());

            // 将抽取到的三元组信息传到后端，后端请求接口存储到数据库
            var insert_map_data = JSON.stringify(get_table_data());

            $.ajax({
                url: '{% url 'insert_map' %}',
                type: 'POST',
                data: {"insert_map_data": insert_map_data},
                success: function (res) {
                    alert(res.data);
                },
                error: function (response) {
                    console.log(response);
                }
            });
        }


        // 将抽取到的信息进行知识图谱预览
        function map_preview() {
            // 将抽取到的三元组信息传到后端，后端请求接口存储到数据库
            var insert_map_data = JSON.stringify(get_table_data());
            console.log(insert_map_data);
            xadmin.open("三元组图谱预览", "{% url 'map_preview' %}?insert_map_data=" + insert_map_data, 1200, 580)

            /*
            $.ajax({
                url: '',
                type: 'POST',
                data: {"insert_map_data": insert_map_data},
                success: function (res) {
                    alert(res.data);
                },
                error: function (response) {
                    console.log(response);
                }
            });
            */
            /*
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                layer.open({
                    type: 2,
                    anim: 2,//弹出方式
                    shade: 0.3, //遮罩透明度
                    maxmin: true, //允许全屏最小化
                    shadeClose: true,//点击外部不关闭
                    area: ['1200px', '580px'],
                    title: '三元组图谱预览',  //题目
                    data:{"insert_map_data": insert_map_data},
                    content: ''
                });
            })
            */
        }
    </script>
{% endblock %}